<template>
  <baidu-map
    class="map"
    ak="DULIEYY5SbVrdztMXHpbWyRbLWboXUsS"
    v="3.0"
    type="API"
    :center="point"
    :zoom="15"
  >
    <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
    <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
    <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
  </baidu-map>
</template>

<script setup lang="ts">
import { BaiduMap, BmScale, BmNavigation, BmCityList } from 'vue-baidu-map-3x'
import { reactive } from 'vue'

const point = reactive({
  lng: 116.404,
  lat: 39.915
})
</script>

<style scoped>
.map {
  width: 100%;
  height: 100%;
}
</style>
